<template>
    <el-card class="mt16">
        <!-- 添加角色 -->
        <el-row>
            <el-col>
                <el-button type="primary">添加角色</el-button>
            </el-col>
        </el-row>
        <!-- 角色列表 -->
        <el-table border class="mt16" :data="roleList">
            <el-table-column label="" type="expand">
                <template #default="scope">
                    <div class="pad16" v-if="scope.row.children.length > 0">
                        <el-row class="mt16 borderBottom" v-for="item1 in scope.row.children" :key="item1.id">
                            <el-col :span="8">
                                <el-tag effect="dark" @close="deleteRight(scope.row.id, item1.id)" closable>{{
                                    item1.authName
                                }}</el-tag>
                            </el-col>
                            <el-col :span="16">
                                <el-row class="mt16" v-for="item2 in item1.children" :key="item2.id">
                                    <el-col :span="8">
                                        <el-tag type="success" @close="deleteRight(scope.row.id, item2.id)" closable
                                            effect="dark"> {{ item2.authName }}</el-tag>
                                    </el-col>
                                    <el-col :span="16">
                                        <el-tag class="m16" @close="deleteRight(scope.row.id, item3.id)" closable
                                            type='warning' effect="dark" v-for="item3 in item2.children">{{
                                                item3.authName }}</el-tag>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>

                    </div>

                    <div v-else>该角色暂无权限</div>

                </template>



            </el-table-column>
            <el-table-column label="#" type="index"></el-table-column>
            <el-table-column label="角色名称" prop="roleName"></el-table-column>
            <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <div>
                        <el-button type="primary" :icon="Edit" size="small">编辑</el-button>
                        <el-button type="danger" :icon="Delete" size="small">删除</el-button>
                        <el-button @click="openSetRightDia(scope.row.id, scope.row)" type="warning" :icon="Setting"
                            size="small">分配权限</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </el-card>

    <!-- 打开分配权限弹框 -->
    <el-dialog v-model="isRightDia" title="Tips" width="30%" :before-close="handleClose">
        <!-- 解释tree组件参数
            1.data:tree数据源
            2.show-checkbox：是否显示前面的复选框
            3.node-key:每个tree节点的唯一id
            4.default-expanded-keys:默认展开的id节点  数组
            5.default-expand-all 是否展开全部节点
            6.default-checked-keys:默认的选中项  数组
            7.prop默认配置 标签名子，子级属性
        
         -->
        <el-tree ref="treeRef" :data="rightTreeArr" show-checkbox node-key="id" default-expand-all
            :default-checked-keys="checkedArr" :props="defaultProps" />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="isRightDia = false">取消</el-button>
                <el-button type="primary" @click="setRightOk">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import * as API from '@/http/api'
import type { IRoleItem, IRightItem } from '@/dataType/index'
import { Edit, Delete, Setting } from '@element-plus/icons-vue'
import { ElTree } from 'element-plus'


onMounted(() => {
    //加载角色列表
    getRoleList()
})

//tree数组源
const rightTreeArr = ref<IRightItem[]>([])

//默认的选中项
const checkedArr = ref<number[]>([])

//treeRef
const treeRef = ref<InstanceType<typeof ElTree>>()


//默认tree配置项
const defaultProps = reactive({
    children: 'children',
    label: 'authName'
})


//关闭弹框事件
const handleClose = () => {
    checkedArr.value = []
    isRightDia.value = false
}

//确定分配权限
const setRightOk = async () => {
    //1.拿到角色id
    //2.最终权限字符串
    //2.1 先获取全选的id组成的数组
    const allCheckArr = treeRef.value?.getCheckedKeys() as number[]
    console.log('全选：', allCheckArr)
    //2.2 再获取半选id组成的数组
    const halCheckArr = treeRef.value?.getHalfCheckedKeys() as number[]
    console.log('半选：', halCheckArr)
    //2.3 再合并上面的全选和半选的数组
    const mergeCheckedArr = [...allCheckArr, ...halCheckArr]
    //2.4 将合并后的新数组转换为字符串
    const checkedStr = mergeCheckedArr.join(',')

    //3.调用角色授权接口
    await API.setRightToRoleApi(role_id.value, checkedStr)
    //4.隐藏弹框
    isRightDia.value = false
    //5.刷新页面
    getRoleList()
}

const isRightDia = ref(false)
//角色id
const role_id = ref(-1)
//打开分配权限弹框
const openSetRightDia = async (roleId: number, row: any) => {
    //拿到角色id
    role_id.value = row.id;
    //调用接口接口
    const res = await API.getRightListApi('tree')
    console.log('权限列表tree：', res)
    rightTreeArr.value = res.data
    //调用递归函数拿到当前角色的所有权限id
    getCurrentRoleAllRight(row, checkedArr.value)

    console.log('选中的id权限数组：', checkedArr.value)

    //显示弹框
    isRightDia.value = true

}

//递归函数拿到当前角色的所有权限id方法
const getCurrentRoleAllRight = (row: any, checkedArr: number[]) => {
    if (!row.children) {
        return checkedArr.push(row.id)
    }

    row.children.forEach((item: any) => {
        getCurrentRoleAllRight(item, checkedArr)
    })

}
//删除角色指定权限方法
const deleteRight = async (roleId: number, rightId: number) => {
    console.log(roleId)
    console.log(rightId)

    //调角色指定权限接口
    await API.deleteRightApi(roleId, rightId)
    //刷新页面
    getRoleList()
}


const roleList = ref<IRoleItem[]>([])

//角色列表方法
const getRoleList = async () => {
    //调用角色列表接口
    const res = await API.getRoleListApi()
    console.log('角色列表111:', res)
    roleList.value = res.data
}

</script>

<style scoped>
@import "@/assets/public.css"
</style>